<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 
        authName: "商品管理"
        id: 101
        level: "0"
        path: "goods"

       -->
      <el-table style="width: 100%" :data="rightsList">
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column label="权限名称" prop="authName"> </el-table-column>
        <el-table-column label="路径" prop="path"> </el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.level==='0'">{{scope.row.level}}</el-tag>
            <el-tag type="success" v-else-if="scope.row.level==='1'">{{scope.row.level}}</el-tag>
            <el-tag type="warning" v-else>{{scope.row.level}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightsList: [],
      pagenum:1,
      pagesize:10,
      total:0
    }
  },
  created() {
    this.getRights()
  },

  methods: {
    //获取权限数据
    async getRights() {
      let {
        data: { data, meta },
      } = await this.$api.getRightsList()
      if (meta.status === 200) {
        this.rightsList = data
        console.log(data);
      } else {
        this.$message.error('获取权限数据失败')
      }
    },
    //监听每页条数变化
    handleSizeChange() {},
    //监听当前页码变化
    handleCurrentChange() {}
  },
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  height: 20px;
  line-height: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
</style>